import { Component, Vue } from "vue-property-decorator";
import menuTrees from "./side-menu.json";

class MenuItem {
  item: [];
  key: string;
  keyPath: string[];
  selectedKeys: string[];
}

@Component({
  computed: {
    activeMenuTree: function() {
      return this.menuTrees.filter(function(menuTree) {
        return this.hasPermission(menuTree);
      });
    }
  }
})
export class SideMenu extends Vue {
  collapsible: boolean = true;
  collapsed: boolean = false;
  menuTrees: {} = menuTrees;
  openKeys: string[] = [""];
  selectedKeys: string[] = [""];

  async mounted() {
    this.openKeys = [this.$route.meta.openKey];
    this.selectedKeys = [this.$route.meta.selectedKey];
  }

  hasPermission(requiredPermissionSets: Array<string>): boolean {
    return true;
    //   return hasPermissionSet(
    //     JSON.parse(this.$store.state.moduleUser.permission_set),
    //     requiredPermissionSets
    //   );
  }

  onMenuItemSelect(menuItem: MenuItem) {
    this.selectedKeys = menuItem.selectedKeys;
  }
}

export default SideMenu;
